<template>
  <a-modal v-model:visible="visible" :title="modalTitle" width="35%" @ok="handleOk" @cancel="handleCancel">
    <a-form :model="formState" ref="formRef" :label-col="{ span: 5 }">
      <a-form-item label="账号" name="username" :rules="[{ required: true, message: '请输入账号' }]">
        <a-input v-model:value="formState.username" placeholder="请输入账号"></a-input>
      </a-form-item>
      <a-form-item label="姓名" name="real_name" :rules="[{ required: true, message: '请输入姓名' }]">
        <a-input v-model:value="formState.real_name" placeholder="请输入姓名"></a-input>
      </a-form-item>
      <a-form-item label="登录密码" name="password" :rules="[{ required: true, message: '请输入登录密码' }]">
        <a-input v-model:value="formState.password" placeholder="请输入登录密码"></a-input>
      </a-form-item>
      <a-form-item label="超级管理员" name="is_super">
        <a-radio-group v-model:value="formState.is_super" placeholder="请选择">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="类型" name="user_type">
        <a-radio-group v-model:value="formState.user_type">
          <a-radio :value="1">客服</a-radio>
          <a-radio :value="2">bd</a-radio>
          <a-radio :value="3">客服和bd</a-radio>
          <a-radio :value="4">非客服和bd</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="角色" name="role_id" v-if="formState.is_super === 0"
        :rules="[{ required: true, message: '请选择角色' }]">
        <a-select v-model:value="formState.role_id" placeholder="请选择角色">
          <a-select-option v-for="(item, index) in state.roleOpt" :value="item.role_id" :label="item.name" :key="index">{{
            item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, reactive } from "vue";
import { message } from "ant-design-vue";
import { getAll as getAllRole } from "@/api/admin/role";
import { add, edit } from "@/api/admin/storeUser";
import useModal from "@/utils/useModal";

const emits = defineEmits(["modal-success"]);
const formRef = ref();
const { visible, modalTitle } = useModal();

const formState = reactive({
  username: "",
  real_name: "",
  is_super: 0,
  role_id: null,
});
const state = reactive({
  loading: false,
  roleOpt: [],
});
const show = (model) => {
  modalTitle.value = model ? "编辑账号" : "新增账号";
  visible.value = true;
  if (model && model.store_user_id) {
    resetForm(model);
    formState.role_id = Number(model.role_ids);
  } else {
    resetForm({
      store_user_id: null,
      username: "",
      real_name: "",
      is_super: 0,
      role_id: null,
    });
  }
  if (formState.is_super == 0 || formState.role_id) {
    getRoleList();
  }
};
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
// 商家分类
const getRoleList = () => {
  getAllRole().then((res) => {
    if (res.code == 0) {
      const data = res.data;
      state.roleOpt = data;
    }
  });
};
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    const params = {
      ...formState,
    };
    if (formState.store_user_id) {
      // 编辑
      edit({
        id: formState.store_user_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("modal-success");
        }
      });
    } else {
      // 添加
      add({
        ...params,
      }).then((res) => {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("modal-success");
        }
      });
    }
  });
};
const handleCancel = (e) => {
  formRef.value.resetFields();
};
// 暴露方法
defineExpose({
  show,
});
</script>
<style scoped></style>
